<template>
    <div class="wrapper">
        <div class="container">
            <div class="left">
                <div class="logo" style="-webkit-app-region: drag">
                    <img src="./images/logo.png">
                    <span class="lang" style="-webkit-app-region: no-drag" @click="changeL">{{lang=='zh-cn'?'中':'EN'}}</span>
                </div>
                <side-bar></side-bar>
                <node-sync></node-sync>
                <div class="version">
                    <div>{{$t("settings.version")}}：{{version}}</div>
                    <div class="btn" v-show="finished" @click="update"><span>{{$t("settings.updater")}}</span></div>
                </div>
            </div>
            <div class="right">
                <v-header>
                    <span>
                        <span class="header icon-back" v-if="flag=== 'child'" style="-webkit-app-region: no-drag;cursor: pointer;" @click="goBack"></span>
                        <span class="header dark-black">{{title | PathName}}</span>
                        <span class="header dark-black" v-if="path=='/o-wallet-details'"> - {{nodeName}}</span>
                    </span>
                </v-header>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import sideBar from '../../components/sideBar/sideBar'
import nodeSync from '../../components/nodeSync/nodeSync'
import vHeader from '../../components/header/header'
import { updateNow, version } from '../../createAccount'
export default {
    name: "home",
    components: {
        sideBar,
        nodeSync,
        vHeader
    },
    props: {
        finished: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            path:'',
            title:'',
            flag:'',
            version: ''
        }
    },
    computed: {
        ...mapGetters(['lang', 'nodeName'])
    },
    watch: {
        $route(n, o) {
            this.path = n.path;
            this.title = n.name;
            this.flag = n.meta.flag;
        }
    },
    created(){
        this.title = this.$route.name;
        this.flag = this.$route.meta.flag;
    },
    mounted(){
        version((res)=>{
            this.version = res
        })
    },
    methods:{
        ...mapActions(['changeLang']),
        changeL(){
            let destLang = this.lang=='zh-cn'?'en':'zh-cn';
            this.changeLang(destLang);
            this.$i18n.locale = destLang;
            window.i18nLocale = destLang;
        },
        goBack(){
            this.$router.back()
        },
        update(){
            // 安装更新
            updateNow()
        }
    }
}
</script>

<style lang="less" scoped>
.wrapper{
    height:100%;
    .container{
        position:relative;
        z-index: 99;
        display: flex;
        height:100%;
        overflow:hidden;
        .left{
            position: relative;
            width: 180px;
            height: 100%;
            background: #101749;
            background:url('./images/bg-left.png') no-repeat 0 0;
            background-size:100% 100%;
            .logo{
                width: 100%;
                height: 60px;
                img{
                    margin-top:16px;
                    margin-left:31px;
                    margin-bottom:18px;
                    display: inline-block;
                }
                .lang{
                    float:right;
                    margin-top:20px;
                    margin-right:20px;
                    width:20px;
                    height:20px;
                    line-height:20px;
                    text-align:center;
                    background: #F5A623;
                    border-radius: 2px;
                    color:#fff;
                    font-size:12px;
                    cursor:pointer;
                }
            }
            .version{
                padding-left:20px;
                font-size:12px;
                position: absolute;
                left:0;
                right:15px;
                bottom: 20px;
                color:rgba(255,255,255,0.5);
                text-align: left;
                .btn{
                    margin-top:7px;
                    cursor: pointer;
                    span{
                        padding-right:10px;
                        position: relative;
                        &:before{
                            content:'';
                            display: inline-block;
                            width:7px;
                            height:7px;
                            background: #ff0000;
                            border-radius: 50%;
                            position: absolute;
                            top:0;
                            right:0;
                        }
                    }
                }
            }
        }
        .right{
            flex: 1;
            background: #F3F8FF;
            overflow-x:hidden;
            position: relative;
            .header{
                float: left;
                display: inline-block;
                min-width: 16px;
                height: 36px;
                line-height:36px;
            }
            .icon-back{
                margin-left:5px;
                margin-right: 6px;
                height:36px;
                line-height:36px;
                background: url("./images/icon-back.png") no-repeat center center;
                background-size: 16px 16px;
            }
        }
    }
}
</style>